<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./resoures/element-ui/index.css">
  <!-- //引入vue.js -->
  <script src="./resoures/vue.js"></script>
  <script src="./resoures/element-ui/index.js"></script>
  <!-- 引入axios -->
  <script src="./resoures/axios.min.js"></script>
</head>
<body>
  <div id="app">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="书城后台" name="first">书城后台欢迎你！</el-tab-pane>
      <el-tab-pane label="用户管理" name="second">
        <div style="z-index: 80">
        <el-table
                :data="userList"
                style="width: 100%">
          <el-table-column
                  prop="id"
                  label="用户ID">
          </el-table-column>
          <el-table-column
                  prop="username"
                  label="用户名">
          </el-table-column>
          <el-table-column
                  prop="password"
                  label="密码">
          </el-table-column>
          <el-table-column
                  prop="phone"
                  label="电话">
          </el-table-column>
          <el-table-column
                  prop="email"
                  label="邮箱">
          </el-table-column>
          <el-table-column
                  prop="address"
                  label="地址">
          </el-table-column>
          <el-table-column
                  prop="createTime"
                  label="创建时间">
          </el-table-column>
          <el-table-column
                  prop="isAdmin"
                  label="是否管理员">
          </el-table-column>
          <!-- 添加管理列 -->
          <el-table-column
                  label="用户信息操作">
            <template slot-scope="scope">
              <el-button type="text" @click="handleEdit(scope.row.id)">编辑用户信息</el-button>
              <el-button type="text" @click="handleDelete(scope.row.id)">删除用户信息</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
        <div style="z-index: 99">
          <el-dialog
                  title="编辑用户信息"
                  :visible.sync="dialogVisible"
                  width="30%"
                  :before-close="handleClose">
            <!-- 表单部分 -->
            <el-form ref="myForm" :model="editedUser" label-width="100px">
              <el-form-item label="用户名" prop="username">
                <el-input v-model="editedUser.username"></el-input>
              </el-form-item>
              <el-form-item label="密码" prop="password">
                <el-input v-model="editedUser.password"></el-input>
              </el-form-item>
              <el-form-item label="电话" prop="phone">
                <el-input v-model="editedUser.phone"></el-input>
              </el-form-item>
              <el-form-item label="邮箱" prop="email">
                <el-input v-model="editedUser.email"></el-input>
              </el-form-item>
              <el-form-item label="地址" prop="address">
                <el-input v-model="editedUser.address"></el-input>
              </el-form-item>
              <el-form-item label="是否管理员" prop="isAdmin">
                <el-input v-model="editedUser.isAdmin"></el-input>
              </el-form-item>
            </el-form>
            <!-- 底部按钮 -->
            <span slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleSave">保存</el-button>
          </span>
          </el-dialog>
        </div>
        <div style="margin-top: 50px;">
          <el-pagination
                  background
                  layout="prev, pager, next"
                  :total="total"
                  :current-page="currentPage"
                  :page-size="pageSize"
                  @current-change="handleCurrentChange">
          </el-pagination>
        </div>
      </el-tab-pane>
      <el-tab-pane label="订单管理" name="third">
        <div style="z-index: 90">
          <el-table
                  :data="orderList"
                  style="width: 100%">
            <el-table-column
                    prop="id"
                    label="订单号">
            </el-table-column>
            <el-table-column
                    prop="userId"
                    label="用户ID">
            </el-table-column>
            <el-table-column
                    prop="totalCount"
                    label="总数量">
            </el-table-column>
            <el-table-column
                    prop="totalAmount"
                    label="总价格">
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="订单状态">
            </el-table-column>
            <el-table-column
                    prop="createTime"
                    label="创建时间">
            </el-table-column>
            <el-table-column
                    prop="updateTime"
                    label="修改时间">
            </el-table-column>
            <!-- 添加管理列 -->
            <el-table-column
                    label="操作">
              <template slot-scope="scope">
                <el-button type="text" @click="handleEditOrder(scope.row)">编辑</el-button>
                <el-button type="text" @click="handleDeleteOrder(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div style="margin-top: 50px;">
            <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    :current-page="currentPage"
                    :page-size="pageSize"
                    @current-change="handleCurrentChange">
            </el-pagination>
          </div>
        </div>
        <div style="z-index: 99">
          <el-dialog
                  title="编辑订单状态"
                  :visible.sync="dialogVisible"
                  width="30%"
                  :before-close="handleClose">
            <!-- 表单部分 -->
            <el-form ref="myForm2" :model="editedOrder" label-width="100px">
              <el-form-item label="订单状态" prop="status">
                <el-input v-model="editedOrder.status"></el-input>
              </el-form-item>
            </el-form>
            <!-- 底部按钮 -->
            <span slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleSaveOrder">保存</el-button>
          </span>
          </el-dialog>
        </div>
      </el-tab-pane>
      <el-tab-pane label="图书管理" name="fourth">
        <el-tabs type="border-card">
          <el-tab-pane label="图书管理">
            <div style="z-index: 99">
              <el-dialog
                      title="编辑图书信息"
                      :visible.sync="dialogVisible"
                      width="30%"
                      :before-close="handleClose">
                <!-- 表单部分 -->
                <el-form ref="myForm3" :model="editedBook" label-width="100px">
                  <el-form-item label="书籍名称" prop="name">
                    <el-input v-model="editedBook.name"></el-input>
                  </el-form-item>
                  <el-form-item label="书籍价格" prop="price">
                    <el-input v-model="editedBook.price"></el-input>
                  </el-form-item>
                </el-form>
                <!-- 底部按钮 -->
                <span slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleSaveBook">保存</el-button>
          </span>
              </el-dialog>
            </div>
            <el-table
                    ref="multipleTable"
                    :data="bookList"
                    tooltip-effect="dark"
                    style="width: 100%">
              <!--         -->
              <el-table-column
                      prop="imageName"
                      label="图片"
                      width="200">
                <template slot-scope="scope">
                  <img :src="scope.row.imageName" style="width: 100%; height: auto;">
                </template>
              </el-table-column>
              <el-table-column
                      prop="name"
                      label="图书名称"
                      width="200">
              </el-table-column>
              <el-table-column
                      prop="id"
                      label="图书ID"
                      width="200">
              </el-table-column>
              <el-table-column
                      prop="categoryId"
                      label="分类ID"
                      width="200">
              </el-table-column>
              <el-table-column
                      prop="author"
                      label="作者"
                      width="200">
              </el-table-column>
              <el-table-column
                      prop="price"
                      label="价格"
                      width="120">
              </el-table-column>
              <el-table-column
                      prop="description"
                      label="图书简介"
                      width="120">
              </el-table-column>
              <el-table-column
                      label="图书操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleEditBook(scope.row)">编辑</el-button>
                  <el-button type="text" @click="handleDeleteBook(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
            <div style="margin-top: 50px;">
              <el-pagination
                      background
                      layout="prev, pager, next"
                      :total="total"
                      :current-page="currentPage"
                      :page-size="pageSize"
                      @current-change="handleCurrentChange">
              </el-pagination>
            </div>

          </el-tab-pane>
          <el-tab-pane label="添加图书">
<!--           表单-->
<!--            <form id="bookForm">-->
<!--              <label for="bookName">图书名称:</label><br>-->
<!--              <input type="text" id="bookName" name="bookName"><br>-->

<!--              <label for="categoryID">分类ID:</label><br>-->
<!--              <input type="text" id="categoryID" name="categoryID"><br>-->

<!--              <label for="author">图书作者:</label><br>-->
<!--              <input type="text" id="author" name="author"><br>-->

<!--              <label for="description">图书简介:</label><br>-->
<!--              <textarea id="description" name="description"></textarea><br>-->

<!--              <label for="publisher">出版社:</label><br>-->
<!--              <input type="text" id="publisher" name="publisher"><br>-->

<!--              <label for="image">图片上传:</label><br>-->
<!--              <input type="file" id="image" name="image"><br>-->

<!--              <label for="price">价格:</label><br>-->
<!--              <input type="number" id="price" name="price"><br>-->

<!--              <button type="button" onclick="submitForm()">提交</button>-->
<!--            </form>-->
            <el-form :model="book" :rules="rules" ref="bookForm" label-width="80px">
              <el-form-item label="图书名称" prop="bookName">
                <el-input v-model="book.bookName"></el-input>
              </el-form-item>
              <el-form-item label="分类ID" prop="categoryID">
                <el-input v-model="book.categoryID"></el-input>
              </el-form-item>
              <el-form-item label="图书作者" prop="author">
                <el-input v-model="book.author"></el-input>
              </el-form-item>
              <el-form-item label="图书简介" prop="description">
                <el-input type="textarea" v-model="book.description"></el-input>
              </el-form-item>
              <el-form-item label="出版社" prop="publisher">
                <el-input v-model="book.publisher"></el-input>
              </el-form-item>
              <el-form-item label="图片上传" prop="image">
                <el-upload
                        action=""
                        list-type="picture-card"
                        :on-preview="handlePictureCardPreview"
                        :on-remove="handleRemove">
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="价格" prop="price">
                <el-input-number v-model="book.price" :min="0"></el-input-number>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitForm('bookForm')">提交</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
      <el-tab-pane label="分类管理" name="five">
        <el-tabs type="border-card">
          <div style="z-index: 99">
            <el-dialog
                    title="编辑分类信息"
                    :visible.sync="dialogVisible"
                    width="30%"
                    :before-close="handleClose">
              <!-- 表单部分 -->
              <el-form ref="myForm3" :model="editedgory" label-width="100px">
                <el-form-item label="分类号" prop="sort">
                  <el-input v-model="editedgory.sort"></el-input>
                </el-form-item>
              </el-form>
              <!-- 底部按钮 -->
              <span slot="footer" class="dialog-footer">
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleSaveCategory">保存</el-button>
            </span>
            </el-dialog>
          </div>
          <el-tab-pane label="分类列表">
            <el-table
                    ref="multipleTable"
                    :data="categoryList"
                    tooltip-effect="dark"
                    style="width: 100%">
              <!--         -->
              <el-table-column
                      prop="id"
                      label="分类ID"
                      width="200">
              </el-table-column>
              <el-table-column
                      prop="name"
                      label="分类名"
                      width="200">
              </el-table-column>
              <el-table-column
                      prop="sort"
                      label="分类号"
                      width="200">
              </el-table-column>
              <el-table-column
                      label="图书操作">
                <template slot-scope="scope">
                  <el-button type="text" @click="handleEditCategory(scope.row)">编辑</el-button>
                  <el-button type="text" @click="handleDeleteCategory(scope.row.id)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="添加分类">
            <el-form :model="editedgory" :rules="rules" ref="CategoryForm" label-width="80px">
              <el-form-item label="分类名称" prop="name">
                <el-input v-model="editedgory.name"></el-input>
              </el-form-item>
              <el-form-item label="分类号" prop="sort">
                <el-input v-model="editedgory.sort"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="submitCategoryForm('CategoryForm')">提交</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>

      </el-tab-pane>
      <el-tab-pane label="返回主页" name="six" @click="goindex">
        123
      </el-tab-pane>
    </el-tabs>
  </div>

</body>
<script>
  function submitForm() {
    const form = document.getElementById('bookForm');
    const formData = new FormData(form);

    axios.post('/http://localhost:8081/adminaddbook', formData)
            .then(function (response) {
              console.log(response);
              alert('提交成功');
            })
            .catch(function (error) {
              console.error(error);
              alert('提交失败');
            });
  }
  var vm = new Vue({
    el:'#app',
    data() {
      return {
        activeName: 'first',
        currentPage:1,
        total:10,
        // HeadIndex:1,
        pageSize:10,
        //用户列表
        userList:[],
        //用户表单开关
        dialogVisible: false, // 对话框可见性
        editedUser: {},
        //订单------------------------------------------------
        orderList:[],
        //修改的当前订单
        editedOrder:{},
        //图书-----------------------------------------------
        bookList:[],
        imageName :'',
        editedBook:{},
        book: {
          bookName: '',
          categoryID: '',
          author: '',
          description: '',
          publisher: '',
          image: '',
          price: null
        },
        rules: {
          bookName: [
            { required: true, message: '请输入图书名称', trigger: 'blur' }
          ],
          categoryID: [
            { required: true, message: '请输入分类ID', trigger: 'blur' }
          ],
          author: [
            { required: true, message: '请输入图书作者', trigger: 'blur' }
          ],
          description: [
            { required: true, message: '请输入图书简介', trigger: 'blur' }
          ],
          publisher: [
            { required: true, message: '请输入出版社', trigger: 'blur' }
          ],
          price: [
            { required: true, message: '请输入价格', trigger: 'blur' },
            { type: 'number', message: '价格必须为数字值' }
          ]
        },
      //   -----------------
        categoryList:[],
        editedgory:{},
        category:{},
      };
    },
    methods: {
      handleClick(tab, event) {
        if(this.activeName ==='first'){
          console.log(1)
        }else if (this.activeName ==='second'){
          console.log(2)
          this.currentPage = 1;
          this.searchUserList();
        }else if (this.activeName ==='third'){
          console.log(3)
          this.currentPage = 1;
          this.searchOrderList();
        }else if (this.activeName =='fourth'){
          console.log(4)
          this.currentPage = 1;
          this.searchBookList();
        }else if(this.activeName == 'five'){
          console.log(5);
          this.currentPage = 1;
          this.searchcategory();
        }else if(this.activeName == 'six'){
          window.location.href = '/index'
        }
      },
      //页码改变
      handleCurrentChange(page) {
        this.currentPage = page;
        // 当前页码改变时重新获取数据
        if (this.activeName ==='second') {
          this.searchUserList();
        }else if (this.activeName ==='third') {
          this.searchOrderList();
        }else if(this.activeName ==='five'){
          this.searchBookList();
        }else if (this.activeName ==='six'){

        }
      },
      // ---------------------------------------------------------------------------------
      //用户
      searchUserList(){
        let _this = this;
        axios.get("http://localhost:8081/searchuserlist", {
            params: {
            currentPage: _this.currentPage,
            pageSize: _this.pageSize
            }
        })
        .then(function (response) {
          // 处理成功响应
          console.log(response.data);
          _this.userList = response.data.userList;
          _this.total = response.data.size;

        })
        .catch(function (error) {
          // 处理错误
          console.error(error);
        });
        },
      handleClose(done) {
        // 可以在这里处理对话框关闭前的逻辑
        // 如果需要阻止对话框关闭，可以调用 done(false)
        // 否则调用 done() 即可关闭对话框
        done();
      },
      //点击编辑
      handleEdit(id) {
        // 当用户点击编辑时，将正在编辑的用户信息复制到 editedUser 对象中
        // this.editedUser = row;
        this.dialogVisible = true; // 打开对话框
        this.editedUser.id = id;
        console.log((this.dialogVisible))
        console.log("编辑后id:");
        console.log(id);
        // this.handleSave(id);
      },
      openSucess() {
        this.$message({
          message: '修改成功',
          type: 'success'
        });
      },
      openDelete() {
        this.$message({
          message: '删除成功',
          type: 'success'
        });
      },
      //修改用户信息 表单
      handleSave() {
          // 通过引用表单的 $refs 属性来获取表单数据
          // const formData = this.$refs.myForm.editedUser;
        console.log(this.editedUser.id)
        console.log(this.editedUser)
        // 在这里执行保存操作，您可以将 formData 发送到后端等
        // ...
        // 发送POST请求到后端接口
        let _this = this;
        axios.post('http://localhost:8081/adminupdateuser', this.editedUser)
                .then(response => {
                  // 请求成功处理
                  console.log('后端返回的数据:', response.data.code);
                  // 在这里执行其他操作，例如更新UI等
                  if (response.data.code ===1){
                    _this.openSucess();
                    _this.searchUserList();
                  }else {
                    alert("未更新")
                  }
                })
                .catch(error => {
                  // 请求失败处理
                  console.error('请求错误:', error);
                  // 在这里执行错误处理，例如显示错误消息等
                });
        // 关闭对话框
        this.dialogVisible = false;
      },
      //删除用户信息
      handleDelete(id){
        let _this = this;
        console.log(id);
        axios.get('http://localhost:8081/admindeleteuser', {
          params: {
            id: id
          }
        }).then(response => {
                  // 请求成功处理
                  console.log('后端返回的数据:', response.data);
                  // 在这里执行其他操作，例如更新UI等
                  if (response.data.code === 1) {
                    _this.openSucess(); // 确保方法名正确
                    _this.searchUserList();
                  } else {
                    alert("未更新");
                  }
                })
                .catch(error => {
                  // 请求失败处理
                  console.error('请求错误:', error);
                  // 在这里执行错误处理，例如显示错误消息等
                });
      },
      handleCancel() {
        // 取消操作，关闭对话框
        this.dialogVisible = false;
      },

    //  --------------------------------------------------------------------------
    //订单
      searchOrderList(){
        let _this = this;
        axios.get("http://localhost:8081/searchorderlist", {
          params: {
            currentPage: _this.currentPage,
            pageSize: _this.pageSize
          }
        }).then(function (response) {
            // 处理成功响应
            console.log(response.data);
            _this.orderList = response.data.orderList;
            _this.total = response.data.size;
          })
          .catch(function (error) {
            // 处理错误
            console.error(error);
          });
      },
      //修改订单状态
      handleEditOrder(id){
        this.dialogVisible = true; // 打开对话框
        this.editedOrder = id;
        // console.log(this.editedOrder);

      },
      //删除订单
      handleDeleteOrder(id){
        console.log(id);
        _this = this;
        // 发起 GET 请求，并传入用户名称参数
        axios.get("http://localhost:8081/admindeleteorder", {
          params: {
            orderId: id,
          }
        }).then(function (response) {
          // 请求成功处理
          if (response.data.code===1){
            _this.openSucess();
            _this.searchOrderList();
          }
        }).catch(function (error) {
          // 请求失败处理
          alert(error);
        });
      },
      //保存订单
      handleSaveOrder(){
        console.log(this.editedOrder.status)
        _this = this;
        // 发起 GET 请求，并传入用户名称参数
        axios.get("http://localhost:8081/adminupdateorder", {
          params: {
            orderId: _this.editedOrder.id,
            status:_this.editedOrder.status
          }
        }).then(function (response) {
          // 请求成功处理
          if (response.data.code===1){
            _this.openSucess();
            _this.dialogVisible = false;
          }
        }).catch(function (error) {
          // 请求失败处理
          alert(error);
        });
      },
    // ---------------------------------------------------------------------------
      //图书管理
      searchBookList(){
        _this = this;
        // 发起 GET 请求，并传入用户名称参数
        axios.get("http://localhost:8081/adminbooklist", {
          params: {
            currentPage: _this.currentPage,
            pageSize: _this.pageSize
          }
        }).then(function (response) {
          // 请求成功处理
          _this.bookList = response.data.bookList;
          _this.total = response.data.total
        }).catch(function (error) {
          // 请求失败处理
          alert(error);
        });
      },
      //图书表单保存
      handleSaveBook(){
        _this = this;
        // 发起 GET 请求，并传入用户名称参数
        axios.get("http://localhost:8081/adminupdatebook", {
          params: {
            id: _this.editedBook.id,
            name:_this.editedBook.name,
            price: _this.editedBook.price
          }
        }).then(function (response) {
          // 请求成功处理
          if (response.data.code===1){
            _this.openSucess();
            _this.dialogVisible = false;
            _this.searchBookList();
          }
        }).catch(function (error) {
          // 请求失败处理
          alert(error);
        });
      },
      //点击编辑
      handleEditBook(id){
        this.dialogVisible = true; // 打开对话框
        console.log(id);
        this.editedBook = id;
      },
      //点击删除
      handleDeleteBook(id){
        _this = this;
        // 发起 GET 请求，并传入用户名称参数
        axios.get("http://localhost:8081/admindeletebook", {
          params: {
            id: id,
          }
        }).then(function (response) {
          // 请求成功处理
          if (response.data.code===1){
            _this.openSucess();
            _this.searchBookList();
          }
        }).catch(function (error) {
          // 请求失败处理
          alert(error);
        });
      },
      //添加图书
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            console.log(this.book)
            let _this = this;
            // 使用axios提交表单数据到后端
            axios.post("http://localhost:8081/adminaddbook", _this.book)
                    .then(response => {
                      console.log(response.data);
                      alert('提交成功');
                    })
                    .catch(error => {
                      console.error(error);
                      alert('提交失败');
                    });
          } else {
            console.log('表单验证失败');
            return false;
          }
        });
      },
      handlePictureCardPreview(file) {
        console.log('图片预览：', file);
      },
      handleRemove(file, fileList) {
        console.log('移除图片：', file, fileList);
      },

    //   ----------------------------------------------------------------------------------
      //分类管理
      //查询分类
      searchcategory(){
        _this = this;
        // 发起 GET 请求，并传入用户名称参数
        axios.get("http://localhost:8081/admincategoryList", {
          params: {
            currentPage: _this.currentPage,
            pageSize: _this.pageSize
          }
        }).then(function (response) {
          // 请求成功处理
          _this.categoryList = response.data.categoryList;
          _this.total = response.data.total
        }).catch(function (error) {
          // 请求失败处理
          alert(error);
        });
      },
      handleEditCategory(id){
        this.dialogVisible = true; // 打开对话框
        console.log(id);
        this.editedgory = id;
      },
      submitCategoryForm(formName){
        let _this = this;
        // 使用axios提交表单数据到后端
        axios.get("http://localhost:8081/adminaddcategory", {
          params: {
            name: _this.category.name,
            sort: _this.category.sort
          }
        }).then(function (response) {
          // 请求成功处理
          if (response.data.code===1){
            _this.openSucess();
            _this.searchOrderList();
          }
        }).catch(function (error) {
          // 请求失败处理
          alert(error);
        });
      },
      handleSaveCategory(){
        console.log(this.editedgory)
        let _this = this;
        axios.get("http://localhost:8081/adminupdatecategory", {
          params: {
            id: _this.editedgory.id,
            sort: _this.editedgory.sort
          }
        }).then(function (response) {
          // 请求成功处理
          if (response.data.code===1){
            _this.openSucess();
            _this.searchcategory();
          }
        }).catch(function (error) {
          // 请求失败处理
          alert(error);
        });
        this.dialogVisible = false;
      },

      goindex(){
        location.href('/index.html')
      }


    },
    mounted(){
      console.log(this.HeadIndex)
    }
  })
</script>
</html>